<template>
	<view>
		<fa-navbar title="资产详情" :rightText="cuOrgGuid ? '' : '编辑'" @rightClick="toModify"></fa-navbar>
		<scroll-view class="pb-6" scroll-y="true">
			<view>
				<view class="top" style="background-color: #f1f6fc;">
					<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="2000">
						<swiper-item v-for="item of Pics" :key="item.Guid">
							<image :src="item.Url" mode="aspectFit"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="col-white p-2">
					<view class="flex-between">
						<text class="h1-font" style="width: 70%;">{{Name}}</text>
						<view class="pt-m1">
							<text class="font24 p-m1" :class="alarmGuids && alarmGuids.length > 0 ? 'asset-warnning' : 'asset-status'">{{alarmGuids && alarmGuids.length > 0 ? '报警' : '正常'}}</text>
						</view>
						    <view  class="pt-m1"  v-if="StateText != '正常'">
							<text class="asset-transfer font24 p-m1">{{StateText}}</text>
						</view>-->
					</view>
					<view class="h3-font-dim-gray mt-m1">{{OrgName}}</view>
					<view class="flex-between-center mt-1 mb-1">
						<view class="asset-type-num">
							<view class="h5-font-dim-gray">类型</view>
							<view class="h1-font-royal-blue mt-m18">{{TypeText}}</view>
						</view>
						<view class="m-col12">
							<view class="flex-start">
								<u-line color="#ECECF0" direction="col" length="50rpx"></u-line>
								<view class="ml-2">
									<view class="h5-font-dim-gray">数量</view>
									<view class="h1-font-royal-blue mt-m18">{{Num}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-between-center mt-32">
						<text class="h5-font-light-gray flex-between-center m-col12">{{CreateTime}}录入</text>
						<text class="h5-font-light-gray flex-between-center pl-2 m-col12">{{UpdateTime}}更新</text>
					</view>
					<view class="asset-id-bg p-m2 mt-m18">
						<view class="h4-font-dim-gray">
							<view class="flex-between">
								<view style="width: 15%;line-height: 30rpx;">
									资产ID:
								</view>
								<view style="width: 85%;line-height: 30rpx;" class="text-ellipsis">{{EpcId}}</view>
							</view>
						</view>
						<view class="h4-font-dim-gray mt-m24">
							<view v-for="(tid, index) in Tids" :key="index" class="flex-between">
								<view style="width: 15%;line-height: 30rpx;">
									<text v-if="index === 0">标签ID:</text>
								</view>
								<view style="width: 85%;line-height: 30rpx;" class="text-ellipsis">
									{{tid}}
								</view>
							</view>
						</view>
					</view>
					<view>
						<view class="mt-3 h3-font">描述</view>
						<view class="mt-30 mb-30 h5-font-dim-gray">
							<text decode="true">{{Description}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current == 1" class="asset-check-tip p-2 h5-font-light-gray flex-start">
				<view>该资产属于<text style="color: #2E73E5;">{{OrgName}}</text>，请进行处理</view>
			</view>
			<view v-else-if="State === 'ASSET_STATUS_0002' || State === 'ASSET_STATUS_0003'" class="asset-check-tip p-2 h5-font-light-gray flex-start">
				<view> 该资产还处于<text style="color: #2E73E5;">转移中</text>，请尽快完成转移，如该资产已丢失，可操作资产清除</view>
			</view>
		</scroll-view>
		<view v-if="current" class="bottom-layout flex-between-center pl-1 pr-1">
			<view>
				<u-button v-if="current == 1 && OrgGuid !== cuOrgGuid" class="btn2" shape="circle" @click="toggleMessage">移入当前房产</u-button>
				<u-button v-else-if="current == 2" class="btn2" shape="circle" @click="toHandle">处理</u-button>
			</view>
		</view>
		<view v-else class="bottom-layout flex-between-center pl-1 pr-1">
			<view class="h3-font" @click="toOperatedRecord" hover-class="operated-record-hove">查看操作记录</view>
			<view class="flex-between-center">
				<view v-if="TransferState && State !== 'ASSET_STATUS_0001'">
					<u-button class="btn-transfert" shape="circle" @click="toTransfer">转移详情</u-button>
				</view>
				<u-button class="btn" shape="circle" @click="toHandle">处置</u-button>
			</view>
		</view>
		
		<u-modal
			v-model="showPopup"
			content="您确定把该资产移入当前房产吗？" 
			title="提示"
			:title-style="{'font-size': '36rpx', 'color': '#2A2A2A'}"
			:content-style="{'font-size': '32rpx', 'color': '#4F5053'}"
			:cancel-style="{'font-size': '36rpx', 'color': '#2A2A2A'}"
			:confirm-style="{'font-size': '36rpx', 'color': '#2E73E5'}"
			:show-cancel-button="true"
			cancel-text="再想想" 
			@confirm="dialogConfirm"
		></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import SOtime from '@/js_sdk/fl-SOtime/SOtime.js'

	export default {
		components: {
			faNavbar,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			SOtime
		},
		data() {
			return {
				id: '',
				Guid: undefined,
				EpcId: undefined,
				Name: undefined,
				Type: undefined,
				TypeText: undefined,
				OrgGuid: undefined,
				OrgName: undefined,
				Description: undefined,
				Tids: [],
				Pics: [{
					Guid: undefined,
					AssetGuid: undefined,
					Url: undefined
				}],
				CreateTime: undefined,
				UpdateTime: undefined,
				State: undefined,
				StateText: undefined,
				Num: undefined,
				HandleGuid: undefined,
				TransferState: undefined,
				markId: "",
				current: undefined,
				cuOrgGuid:undefined,
				alarmGuids: [],
				showPopup: false
			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.hasOwnProperty("current")) {
				this.current = options.current
			}
			if (options.hasOwnProperty("cuOrgGuid")) {
				this.cuOrgGuid = options.cuOrgGuid
			}
		},

		onShow() {
			this.getAssetDetail(this.id)
		},
		methods: {
			toOperatedRecord() {
				uni.navigateTo({
					url: `/pages/manage/itemAssetOperatedRecord?guid=${this.Guid}`
				})
			},
			toTransfer() {
				let link = `/pages/manage/itemAssetTransfer?guid=${this.Guid}`
				if (this.cuOrgGuid) {
					link = `${link}&cuOrgGuid=${this.cuOrgGuid}`
				}
				if (this.HandleGuid) {
					link = `${link}&handleGuid=${this.HandleGuid}`
				}
				uni.navigateTo({
					url: link
				})
			},
			toHandle() {
				let link = `/pages/handle/assetHandle?guid=${this.Guid}&handleGuid=${this.HandleGuid}`
				if (this.cuOrgGuid) {
					link = `${link}&cuOrgGuid=${this.cuOrgGuid}`
				}
				uni.navigateTo({
					url: link
				})
			},
			// 获取家庭资产详情
			getAssetDetail(guid) {
				let params = {
					ID: guid
				}
				this.$api.getAssetDetail(params)
					.then(res => {
						if (res.code === 0) {
							this.Guid = res.data.Guid
							this.EpcId = res.data.EpcId
							this.Name = res.data.Name
							this.Type = res.data.Type
							this.TypeText = res.data.TypeText
							this.alarmGuids = res.data.AlarmGuids
							this.OrgGuid = res.data.OrgGuid
							this.OrgName = res.data.OrgName
							this.Description = res.data.Description
							this.HandleGuid = res.data.HandleGuid
							this.Tids = res.data.Tids
							if (this.Tids.length > 0) {
								this.markId = ""
								for (var i = 0; i < this.Tids.length; i++) {
									if (i == 0) {
										this.markId += "&emsp;" + this.Tids[i] + "\n"
									} else {
										this.markId += "&emsp;&emsp;&emsp;&emsp;&nbsp;" + this.Tids[i] + "\n"
									}
								}
							}
							this.Pics = res.data.Pics
							if (this.Pics.length == 0) {
								this.Pics.push({Url: '/static/images/icon_assets.svg'})
							}
							this.CreateTime = SOtime.time3(res.data.CreateTime)
							if (res.data.UpdateTime == 0) {
								this.UpdateTime = this.CreateTime
							} else {
								this.UpdateTime = SOtime.time3(res.data.UpdateTime)
							}

							this.State = res.data.State
							this.StateText = res.data.StateText
							this.Num = res.data.Num
							this.HandleGuid = res.data.HandleGuid
							this.TransferState = res.data.TransferState
						}
					})
					.catch(err => console.error(err));
			},

			// 编辑资产
			toModify() {
				uni.navigateTo({
					url: `/pages/manage/modify?id=${this.Guid}`
				})
			},

            // 资产转移
			transferasset(guid, tGuid) {
				let params = {
						AssetGuid: guid,
						TargetOrgGuid: tGuid
					}
					this.$api.transferasset(params)
						.then(res => {
							if (res.code === 0) {
					           this.$refs.uToast.show({
					             	title: '移入成功',
					           })
							   uni.navigateBack()
							}
						})
						.catch(err => console.error(err));
				},
			/**
			 * 打开消息提示
			 * @param {Object} type
			 */
			toggleMessage() {
				this.showPopup = true
			},

			/**
			 * 对话框点击确认按钮
			 */
			dialogConfirm(done) {
				this.transferasset(this.Guid, this.cuOrgGuid)
				this.showPopup = false
			},
	
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 750rpx;
		height: 532rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.asset-status {
		background-color: rgba(84, 224, 164, 0.1);
		color: #2DC35E;
		text-align: center;
		align-items: center;
	}

	.asset-warnning {
		background-color: rgba(229, 93, 93, 0.1);
		color: #E55D5D;
		text-align: center;
		align-items: center;
	}

	.asset-transfer {
		background-color: rgba(46, 115, 229, 0.1);
		color: #2E73E5;
		text-align: center;
		align-items: center;
	}

	.btn-transfert {
		width: 212rpx;
		height: 80rpx;
		margin-right: 20rpx;
		color: #3278E6;
		border: 1px solid #3278E6;
	}

	.asset-id-bg {
		background-color: #F6F8FB;
	}

	.asset-check-tip {
		width: 100%;
		height: 160rpx;
		background-color: #F2F2F2;
		align-items: center;
	}

	.bottom-layout {
		width: 100%;
		height: 120rpx;
		border-top-style: 1rpx solid;
		background-color: #FFFFFF;
		bottom: 0; //可以更改为自己的需求距离底部的长度
		position: fixed;

		.operated-record-hove {
			color: #2E73E5;
		}

		.btn {
			width: 212rpx;
			height: 80rpx;
			background: linear-gradient(310deg, #5BABF4 0%, #2E73E5 100%);
			color: white;
		}

		.btn2 {
			width: 670rpx;
			height: 80rpx;
			background: linear-gradient(310deg, #5BABF4 0%, #2E73E5 100%);
			color: white;
		}
	}
</style>
